<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link href="layui/css/layui.css"/>
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>


    <style>
        /*注册页面*/
        .container {
            border: 1px solid rgba(255, 255, 255, 0.3);
            margin-top: 100px;
            width: 50%;

            margin-left: 50px;

        }

        body {
            background-image: url("http://localhost:8070/design/img/2018764230.jpg");
        }

        #l1, #l2, #l3, #l4 {
            color: #6656bc;
        }


    </style>
<body>
<div class="container">
    <div class="" style="width:50%; height: 60px;padding-top: 1px;">
        <h2 align="center" style="color: #6656bc;font-size: 25px">用户注册</h2>
    </div>
    <br><br>
    <form action="user/register" name="myform" method="post" class="form-horizontal" role="form">
        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l1">邮箱</label>
            <div class="col-sm-4 col-md-4">
                <table style="width:100%">
                    <tr>
                        <td>
                            <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱"/>
                        </td>
                        <td>
                            <span id="isExit"></span>
                        </td>
                    </tr>
                </table>
                <span></span>
            </div>
        </div>

        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l2">密码</label>
            <div class="col-sm-4 col-md-4">
                <input type="password" class="form-control" id="password" placeholder="请输入您的密码"/>
                <span></span>
            </div>
        </div>

        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l3">确认密码</label>
            <div class="col-sm-4 col-md-4">
                <input type="password" class="form-control" id="password1" placeholder="请输入您的密码"/>
            </div>
        </div>
        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l4">验证码</label>
            <div class="col-sm-2 col-md-2">
                <input type="text" class="form-control" id="code" placeholder="请输入验证码"/>
            </div>
            <div class="col-sm-2 col-md-2">
                <button type="button" id="codeBtn" class="btn btn-primary">发送邮件</button>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-success" id="regBtn" disabled>注册</button>
                <span style="margin-left: 35px">已有账号？<a th:href="@{user/toLogin}" style="font-size: 15px">登录</a></span>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    //给邮件添加失去焦点事件
    $("#email").blur(function () {
        var email = $("#email").val();
        if (email == null || email == "") {
            layer.msg("请填写邮箱");
            return;
        }
        $.post("/design/user/checkEmail", {"email": email}, function (data) {
            if (data.state == 200) {
                layer.msg(data.message);
            } else {
                layer.msg(data.message);
            }
        });
        removeDisabled();
    });

    $("#password").blur(function () {
        var password = $("#password").val();
        if (password == null || password == "") {
            layer.msg("密码不能为空");
            return;
        }
        layer.msg("密码可用");
        removeDisabled();
        return;
    });

    $("#password1").blur(function () {
        var password1 = $("#password1").val();
        var password = $("#password").val();
        if (password1 == null || password1 == "") {
            layer.msg("确认密码不能为空");
            return;
        }
        if (password1 != password) {
            layer.msg("两次密码不一致");
            return;
        }
        layer.msg("两次密码输入通过");
        removeDisabled();
        return;
    });

    $("#code").blur(function () {
        var code = $("#code").val();
        if (code == null || code == "") {
            layer.msg("验证码不能为空");
            return;
        }
        removeDisabled();
        return;
    });

    function removeDisabled() {
        var email = $("#email").val();
        var password = $("#password").val();
        var password1 = $("#password1").val();
        var code = $("#code").val();
        if ((email != null && email != "") && (password != null && password != "") && (password1 != null && password1 != "") && (code != null && code != "")) {
            //移除disable 属性
            $('#regBtn')[0].removeAttribute('disabled');
            //添加点击事件
        }
    }
    function myFunction(){
        var i=30;
        var myVar="";
        var myVar=setInterval(function(){
            var codeBtn = document.getElementById("codeBtn");
            codeBtn.innerHTML=i+"秒";
            $("#codeBtn").attr({"disabled":"disabled"})
            i = i-1;
            if(i==0){
                clearInterval(myVar);
                codeBtn.innerHTML="重新发送";
                $("#codeBtn").removeAttr("disabled")
            }
        },1000);
    }

    $("#codeBtn").click(function () {
        myFunction();
        var email = $("#email").val();
        $.post("/design/user/checkEmail",{email:email},function (result) {
            if (result.state==200){
                $.post("/design/user/sendEmail",{email:email},function (result) {
                    if (result.state==200){

                    }else {
                        alert(result.message);
                    }
                });
            }else {
                alert(result.message);
            }
        });

    });

    $("#login").click(function () {
        location.href = "/design/user/toLogin";
    });

    $("#regBtn").click(function () {
        var email = $("#email").val();
        var password = $("#password").val();
        var password1 = $("#password1").val();
        var code = $("#code").val();
        if (email == null || email == "") {
            alert("邮箱不能为空");
            return;
        }
        if (password == null || password == "") {
            alert("密码不能为空");
            return;
        }
        if (password != password1) {
            alert("两次密码输入不一致");
            return;
        }
        if (code.length!=6){
            alert("验证码输入错误");
            return;
        }
        $.post("/design/user/reg", {email: email, password: password,code:code}, function (data) {
            if (data.state == 200) {
                alert(data.message);
                location.href = "/design/user/toLogin";
            } else {
                alert(data.message);
            }
        });
    });
</script>
</html>